<template>
  <div class="dmWrap">
    <figure v-for="item in list" :key="item.id" @click="toDetail(item.id)">
      <img src="@/assets/logo.png" alt="" />
      <figcaption>
        <h4>{{ item.nickName }}</h4>
        <div>
          <span>好评率{{ item.feedbackrate }}%</span>
          <span class="count">已开场{{ item.frequency }}场</span>
        </div>
      </figcaption>
    </figure>
  </div>
</template>

<script>
export default {
  props: ["list"],
  methods: {
    toDetail(dmid) {
      this.$router.push(`/dmdetail/${dmid}`);
    },
  },
};
</script>

<style lang="less" scoped>
.dmWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem;
  figure {
    background-color: rgba(102, 102, 102, 1);
    border-radius: 0.1rem;
    height: 1.735rem;
    width: 1.575rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.2rem;
    img {
      width: 100%;
    }
    figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.46rem;
      z-index: 10;
      box-sizing: border-box;
      padding: 0 0.04rem;
      color: #fff;
      h4 {
        font-size: 0.16rem;
        margin-bottom: 0.04rem;
      }
      div {
        height: 0.18rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          font-size: 0.1rem;
          height: 0.16rem;
          line-height: 0.16rem;
          padding: 0 0.04rem;
          display: inline-block;
          border-radius: 0.16rem;
          background: linear-gradient(
            90deg,
            #d3a8ff 0%,
            #ffffff 0%,
            #cc9aff 0%,
            #8f20ff 100%
          );
          &:first-child {
            position: relative;
            z-index: 30;
          }
          &:last-child {
            padding-left: 0.4rem;
            position: relative;
            left: -0.34rem;
            z-index: 25;
          }
        }
      }
    }
  }
}
</style>
